<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> 
  <head>
    <title>购物车 -</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
	<script type="text/javascript" src="<c:url value="/js/common.js"/>"></script>

	<style>
		* {
			PADDING: 0px; 
			MARGIN: 0px; 
		}
		BODY {
			FONT-SIZE: 12px; 
			COLOR: #404040; 
			FONT-FAMILY: "宋体", Arial, Helvetica, sans-serif; 
			BACKGROUND-COLOR: #fff
		}
		IMG {
			BORDER-WIDTH: 0px
		}
		A {
			COLOR: #1a66b3; 
			TEXT-DECORATION: none
		}
		A:hover {
			COLOR: #1a66b3; 
			TEXT-DECORATION: underline
		}
		.comm_head {
			PADDING-LEFT: 1px; 
			PADDING-RIGHT: 1px; 
			PADDING-TOP: 0px; 
			PADDING-BOTTOM: 15px; 
			MARGIN: 0px auto; 
			WIDTH: 962px; 
			BACKGROUND-COLOR: #fff;
			/* border: 1px solid red; */
		}
		.welcome_notice {
			PADDING-LEFT: 19px; 
			PADDING-RIGHT: 7px; 
			PADDING-TOP: 0px; 
			PADDING-BOTTOM: 0px; 
			BORDER-RIGHT: #a7a7a7 1px solid; 
			BORDER-TOP: #a7a7a7 1px; 
			BORDER-LEFT: #a7a7a7 1px solid; 
			BORDER-BOTTOM: #a7a7a7 1px solid; 
			HEIGHT: 25px; 
			BACKGROUND-COLOR: #fffbf0;
			/* border: 1px solid red; */
		}
		.head_toutext {
			MARGIN-TOP: 7px; 
			FONT-WEIGHT: bold; 
			FLOAT: left;
			WIDTH: 400px; 
			HEIGHT: 15px;
			/* border: 1px solid red; */
		}
		.little_navi {
			FLOAT: right; 
			PADDING-TOP: 4px;
		}
		.little_navi .little_n {
			DISPLAY: block; 
			FLOAT: left; 
			LINE-HEIGHT: 20px; 
			MARGIN-RIGHT: 8px; 
			PADDING-TOP: 2px
		}
		.little_navi .little_n A.green {
			FONT-WEIGHT: bold; 
			COLOR: #0d7101; 
			TEXT-DECORATION: none
		}
		.little_navi .little_n A.green:hover {
			FONT-WEIGHT: bold; 
			COLOR: #0d7101; 
			TEXT-DECORATION: underline;
		}
		.cart {
			PADDING-LEFT: 25px; 
			PADDING-RIGHT: 3px; 
			MARGIN-TOP: 5px; 
			BACKGROUND: url(<c:url value="/pics/front/CART_BG1.gif" />) no-repeat; 
			FLOAT: right; 
			LINE-HEIGHT: 20px; 
			HEIGHT: 18px
		}
		.gray4012 A {
			COLOR: #404040; 
			TEXT-DECORATION: none
		}
		.gray4012 A:hover {
			COLOR: #404040; 
			TEXT-DECORATION: underline
		}
		.welcome_p {
			PADDING-TOP: 7px
		}
		.welcome_p A.b {
			FONT-WEIGHT: bold; 
			TEXT-DECORATION: none
		}
		.welcome_p A.b:hover {
			FONT-WEIGHT: bold; 
			TEXT-DECORATION: underline
		}
		.my_head {
			BACKGROUND: url(<c:url value="/pics/front/jianbian1.gif" />) repeat-x 50% bottom; 
			PADDING-BOTTOM: 9px; 
			WIDTH: 960px;
			/* border: 1px solid red; */
		}
		.logo_navi {
			BORDER-LEFT: #878787 1px solid; 
			BORDER-RIGHT: #878787 1px solid; 
			PADDING-LEFT: 25px; 
			PADDING-TOP: 14px; 
			HEIGHT: 63px
		}
		.logo_img {
			FLOAT: left; 
			MARGIN-RIGHT: 33px
		}
		.my_shopping {
			MARGIN: auto; 
			WIDTH: 950px; 
			HEIGHT: 21px
		}
		.pic_shop {
			FLOAT: left; 
			WIDTH: 132px; 
			MARGIN-RIGHT: 15px; 
			MARGIN-LEFT: 5px;
			HEIGHT: 21px
		}
		.shop_news {
			MARGIN-TOP: 10px; 
			FLOAT: left
		}
		.t_red A {
			COLOR: #cc3300; 
			TEXT-DECORATION: none
		}
		.t_red A:hover {
			COLOR: #cc3300; 
			TEXT-DECORATION: underline
		}
		.choice_merch {
			MARGIN: 25px auto auto; 
			WIDTH: 950px
		}
		.objhide {
			DISPLAY: none
		}
		.choice_bord {
			BORDER: #818e6e 2px solid; 
			PADDING: 1px; 
			MARGIN-LEFT: 5px;
			WIDTH: 944px; 
			BACKGROUND-COLOR: #fefbf2
		}
		.tabl_buy {
			WIDTH: 944px; 
			LINE-HEIGHT: 35px; 
			BORDER-COLLAPSE: collapse
		}
		.tabl_buy_title {
			LINE-HEIGHT: 24px; 
			HEIGHT: 24px; 
			BACKGROUND-COLOR: #d8e4c6
		}
		.tabl_buy_title TD {
			BORDER-BOTTOM: #a1a1a1 1px solid
		}
		.tabl_buy_title SPAN {
			DISPLAY: block;
			FONT-SIZE: 12px;
		}
		.span_w1 {
			PADDING-LEFT: 210px;
		}
		.span_w2 {
			PADDING-LEFT: 5px
		}
		.span_w3 {
			PADDING-LEFT: 20px
		}
		.span_w4 {
			PADDING-LEFT: 10px
		}
		.buy_td_1 {
			WIDTH: 58px
		}
		.buy_td_2 {
			WIDTH: 85px
		}
		.buy_td_3 {
			WIDTH: 90px
		}
		.buy_td_4 {
			WIDTH: 135px
		}
		.buy_td_5 {
			WIDTH: 108px
		}
		.buy_td_6 {
			WIDTH: 30px
		}
		.buy_td_7 {
			PADDING-LEFT: 10px; 
			WIDTH: 68px
		}
		.buy_td_8 {
			WIDTH: 78px
		}
		.pic_ss {
			FLOAT: left; 
			MARGIN: 6px 6px 0px
		}
		.w_gray {
			FONT-WEIGHT: bold; 
			COLOR: #666
		}
		.w_gray A {
			COLOR: #666
		}
		.w_gray A:hover {
			COLOR: #666
		}
		.td_no_bord {
			HEIGHT: 35px;
			FONT-SIZE: 12px;
		}
		.c_gray {
			COLOR: #878787
		}
		.gift_no {
			DISPLAY: block; 
			PADDING-LEFT: 17px; 
			CURSOR: pointer
		}
		.del_num {
			BORDER: #797979 1px solid; 
			FONT-SIZE: 12px; 
			WIDTH: 31px; 
			LINE-HEIGHT: 18px; 
			HEIGHT: 18px; 
			TEXT-ALIGN: center
		}
		.no_select {
			FONT-WEIGHT: bold; 
			FONT-SIZE: 14px; 
			LINE-HEIGHT: 67px; 
			HEIGHT: 67px; 
			TEXT-ALIGN: center;
			/* border: 1px solid red; */
		}
		.choice_balance {
			BORDER-TOP: #a1a1a1 2px solid; 
			WIDTH: 944px; 
			HEIGHT: 53px; 
			BACKGROUND-COLOR: #fff
		}
		.select_merch {
			/* BACKGROUND: url(../images/bg_dot_long.gif) no-repeat right 4px; */
			FLOAT: left; 
			MARGIN: 8px 0px 0px 12px; 
			WIDTH: 98px; 
			LINE-HEIGHT: 20px; 
			HEIGHT: 34px
		}
		.select_merch A {
			COLOR: #ff7100; 
			TEXT-DECORATION: none
		}
		.select_merch A:hover {
			COLOR: #ff7100; 
			TEXT-DECORATION: underline
		}
		.total_balance {
			PADDING-RIGHT: 5px; 
			FLOAT: right; 
			HEIGHT: 34px
		}
		.save_total {
			PADDING-RIGHT: 15px; 
			MARGIN-TOP: 11px; 
			FLOAT: left; 
			LINE-HEIGHT: 20px; 
			HEIGHT: 34px; 
			WIDTH: 640px; 
			TEXT-ALIGN: right
		}
		.save_total_right {
			FLOAT: right; 
			LINE-HEIGHT: 36px
		}
		.t_add {
			FONT-WEIGHT: bold; 
			FONT-SIZE: 14px; 
			FLOAT: left
		}
		.c_red_b {
			FONT-WEIGHT: bold; 
			FONT-SIZE: 14px; 
			COLOR: #cc3300
		}
		.save_total_left {
			BORDER-RIGHT: #666 1px solid; 
			WIDTH: 400px; 
		}
		.c_red {
			COLOR: #cc3300
		}
		.balance {
			MARGIN-TOP: 10px; 
			MARGIN-RIGHT: 2px; 
			FLOAT: left; 
			WIDTH: 100px; 
			HEIGHT: 34px
		}
	</style>
	<script type="text/javascript">
		//	$(joe).innerText="更改后的内容";	修改显示内容
		//	$(joe).className="balance";		改变样式表
		
		function $(elementId) {
			return document.getElementById(elementId);
		}
		function $n(elementName,elementIndex)
		{
			//	alert("elementName="+elementName);
			//	alert("elementIndex="+elementIndex);
			//	alert("value="+document.getElementsByName(elementName)[elementIndex]);
			return document.getElementsByName(elementName)[elementIndex];
		}
		function logout() {
			if(confirm("您真的要离开当当网吗?")) {
				location.href="<c:url value="/customer?act=logout"/>";
			}
	    }
	    
		function onlynumber() {
			if (event.keyCode==13){
				return true;
			}
			if (event.keyCode<48||event.keyCode>57){
				event.keyCode=0;
				event.returnValue=false;
			}
			event.returnValue=true;
		}
	    
	    /* var prices=0;
	    function accountPrice(id,i) {
	    	// alert("$n(quantity,0).value:"+$n("quantity",0).value);
	    	var num=$n("quantity",i).value;
	    	// alert("num:"+num);
	    	// alert("num*price:"+num*price);
	    	// alert("$(totalPrices):"+$("totalPrices"));
	    	// $("totalPrices").innerText=num*price;
	    	// prices+=num*price;
	    	location.href="<c:url value="/workflow?act=setOrder&id="/>"+id+"&quantity="+num;
	    } */
	    
	    function getPrices() {
	    	$("totalPrices").innerText=prices.toFixed(1);
	    }
	    
	    
	    
	     function removeBook(id,name)
         {
            //alert("you delete book name:"+name+",id="+id);
            if(confirm("您真的确认要删除图书["+name+"]")){
               location.href="<c:url value="/shoppingcart?act=removeBookInCart&bookcode="/>"+id;
            }
         }
         
         
        function changeBookAmount(id,t)
        {   var x;
            if(t=="addquantity"){
            x="add";
            }else if(t=="subquantity"){
            x="sub";
            }else{
            x=document.getElementById(t).value;
            }
            location.href="<c:url value="/shoppingcart?act=updateShoppingCart&bookCode="/>"+id+"&type="+x;
        }
         
        function loginnote()
        {
             if(confirm("您还未登录，请先登录！")) 
                location.href="<c:url value="/customer?act=showShoppingCart"></c:url>";
             
        }

      
         
         
	</script>

  </head>
  
  <body style="padding-left:23px">
	<DIV class=comm_head>
		<DIV class=welcome_notice>
			<SPAN class=head_toutext id=nickname > 
				您好,${loginedCustomer.customerName} 
    			[<SPAN onclick="logout();" style="cursor:hand;color:green">退出系统</SPAN>]
			</SPAN>
			<DIV class=little_navi>
				<FORM id=bootpagetopSearch name=bootpagetopSearch
					action="" method=get>
					<DIV class=little_n> 
						| <A href="<c:url value="/myDD?act=showMyDD" />" target=mydangdang name=mydangdang>我的当当</A> 
					</DIV>
				</FORM>
			</DIV>
			<DIV class="cart gray4012">
				<A href="<c:url value="/shoppingcart?act=showShoppingCart" />">购物车</A>
			</DIV>
			<P class=welcome_p id=nickname></P>
		</DIV>
		<DIV class=my_head>
			<DIV class=logo_navi>
				<A href="<c:url value="/workflow?act=mainscreen" />">
				<IMG class=logo_img
					src="<c:url value="/pics/front/logo.gif" />">
				</A>
			</DIV>
			<DIV style="float:right;">
			    <IMG alt="3.完成订单" src="<c:url value="/pics/front/tag_3_2.gif" />" height="25px" >
			</DIV>
			<DIV style="float:right;">
			    <IMG alt="2.填写订单" src="<c:url value="/pics/front/tag_2_2.gif" />" height="25px">
			</DIV>
			<DIV style="float:right;">
			    <IMG alt="1.我的购物车" src="<c:url value="/pics/front/tag_1_2.gif" />" height="25px">
			</DIV>
			<DIV style="float:right;">
			                <h3>购物车</h3>
			</DIV>
		</DIV>
	</DIV>
	<DIV class=my_shopping>
		<IMG class=pic_shop title=我的购物车
			src="<c:url value="/pics/front/pic_myshopping.gif" />">
<!-- 		<DIV class="shop_news t_red" id=free_fee_tip>
			<A href="#" name=free_tip>全场免普通快递送货上门费和普通邮递费</A>
		</DIV> -->
	</DIV>
	<DIV class=choice_merch id=div_choice>
		<H4 id=cart_tips>
			&nbsp;您已选购以下商品
		</H4>
		<DIV class=choice_bord>
			<TABLE class=tabl_buy id=tbCartItemsNormal>
				<TBODY>
					<TR class=tabl_buy_title>
						<TD>
							<SPAN class=span_w1>商品名</SPAN>
						</TD>
						<TD class=buy_td_3>
							<SPAN class=span_w2>单品积分</SPAN>
						</TD>
						<TD class=buy_td_5>
							<SPAN class=span_w2>市场价</SPAN>
						</TD>
						<TD class=buy_td_4>
							<SPAN class=span_w3>当当价</SPAN>
						</TD>
						<TD class=buy_td_2>
							<SPAN class=span_w2>数量</SPAN>
						</TD>
						<TD class=buy_td_1>
							<SPAN>删除</SPAN>
						</TD>
					</TR>
					<c:if test="${not empty shoppingcart.items}">
						<c:forEach var="item" items="${shoppingcart.items}" varStatus="idx">
							<TR class=td_no_bord>
								<TD align=center>
									<A title="" href="<c:url value="/workflow?act=showBookByCode&bookCode=${item.book.bookCode}"/>" target=_blank name=product_name>${item.book.bookName}</A>
								</TD>
								<TD class="buy_td_7 c_gray">
									100
								</TD>
								<TD class="buy_td_5 c_gray">
									￥${item.book.bookPrice}
								</TD>
								<TD class=buy_td_4 style="PADDING-LEFT: 12px;">
									￥${item.book.bookPrice}
								</TD>
								<TD class=buy_td_2>
								  <c:if test="${item.amount>1 }">
								    <input  type="button" value="-" name="subquantity" id="subquantity" title="数量减一${item.book.bookName}" 
								            onclick="changeBookAmount('${item.book.bookCode }',this.id);" />
								  </c:if>
                                    <!-- 
                                    <INPUT class=del_num name=quantity maxLength=4 size=3 value=${bookInfo.quantity} onKeyPress="onlynumber();" onblur="accountPrice(${bookInfo.book.price},${index.count-1});getPrices();" /> 
                                    -->
									<input class=del_num name="quantity" id="quantity${idx.index}" maxLength=4 size=3 value="${item.amount}"
									       onchange="changeBookAmount('${item.book.bookCode }',this.id);" />
								    <input  type="button" value="+" name="addquantity" id="addquantity" title="数量加一${item.book.bookName}" 
								            onclick="changeBookAmount('${item.book.bookCode }',this.id);" />
								    
								</TD>
								<TD class=buy_td_1>
									<span title="点击删除[${item.book.bookName}}]图书信息" style="text-decoration: underline; color: blue; cursor: hand;" onclick="removeBook('${item.book.bookCode}','${item.book.bookName}')">删除</span>
								</TD>
							</TR>
						</c:forEach>
					</c:if>
					<c:if test="${empty shoppingcart.items}">
						<TR>
							<TD colspan=6 class=no_select>
								您还没有挑选商品
							</TD>
						</TR>
					</c:if>
				</TBODY>
			</TABLE>
			<DIV class=objhide id=div_no_choice>
			</DIV>
			<DIV class=choice_balance>
				<DIV class=select_merch>
					<A onmouseover="" 
						href="<c:url value="/workflow?act=mainscreen"/>" name=Continue target="_self">继续挑选商品&gt;&gt;
					</A>

					

					<A href="<c:url value="/tempstore?act=loadall" />" target=_self name=favorite_list>再逛逛暂存架&gt;&gt;</A>

				</DIV>
				<DIV class=total_balance>
					<DIV class=save_total>
						<DIV class=save_total_right>
							<SPAN class=t_add>商品金额总计：</SPAN>
							<SPAN class=c_red_b id=totalPrices>￥<fmt:formatNumber pattern="0.00" value="${shoppingcart.cartAmount}"/></SPAN>
						</DIV>
					</DIV>
					<DIV class=balance id=balance>
					    <c:if test="${not empty loginedCustomer }">
						    <A href="<c:url value="/order?act=setOrder&if_balance=Y"></c:url>" name=checkout>
							       <IMG title=结算 alt=结算 src="<c:url value="/pics/front/butt_balance.gif" />" border=0>
						    </A>
						</c:if>
						<c:if test="${empty loginedCustomer }">
						    <A href="<c:url value="/customer?act=toLogin"></c:url>" name=checkout
						        onclick="loginnote()">
							       <IMG title=结算 alt=结算 src="<c:url value="/pics/front/butt_balance.gif" />" border=0> 
						    </A> 
						</c:if>
					</DIV>
				</DIV>
			</DIV>
		</DIV>
	</DIV>
  </body>
</html>
